list-[id].vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756
  1. <template>
  2. <div id="newsList">
  3. <!-- 页面头部 -->
  4. <HomePageHead></HomePageHead>
  5. <!-- 页面导航 -->
  6. <HomePageNavigation></HomePageNavigation>
  7. <!-- 广告1 -->
  8. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  9. <!-- 二级导航列表 -->
  10. <div class="nav2top" v-if="parent_name != ''"></div>
  11. <div class="nav2" v-if="parent_name != ''">
  12. <ul class="inner">
  13. <li class="home">
  14. <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
  15. </li>
  16. <li class="titleList" v-for="(item, index) in secondNav" :key="index">
  17. <NuxtLink :to="{ path: `/${item.aLIas_pinyin}/list-1.html` }">
  18. <span class="nav2_title">{{ item.alias }}</span>
  19. </NuxtLink>
  20. </li>
  21. </ul>
  22. </div>
  23. <div class="nav2btm" v-if="parent_name != ''"></div>
  24. <!-- 面包屑导航 -->
  25. <PublicBreadcrumb></PublicBreadcrumb>
  26. <!-- 资讯列表 -->
  27. <div class="newsList">
  28. <div class="inner">
  29. <div class="innerLeft">
  30. <ul class="list">
  31. <li v-for="(item, index) in newsList" :key="index">
  32. <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
  33. <span class="listTitle">{{ item.title }}</span>
  34. <span class="time">{{ getTime(item.updated_at, 'month', 1) }}</span>
  35. </NuxtLink>
  36. </li>
  37. </ul>
  38. <!-- 分页器 -->
  39. <div class="pagination" v-if="total">
  40. <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
  41. v-model:page-size="pageSize" prev-text="上一页" next-text="下一页" :current-page="pageNum"
  42. @current-change="changePage" />
  43. </div>
  44. </div>
  45. <div class="innerRight">
  46. <DetailHotNews></DetailHotNews>
  47. <DetailHotNews2></DetailHotNews2>
  48. </div>
  49. </div>
  50. </div>
  51. <!-- 列表页广告二 -->
  52. <HomeAdvertising :imgurl="adImg2"></HomeAdvertising>
  53. <!-- 页面底部 -->
  54. <HomeFoot1></HomeFoot1>
  55. </div>
  56. </template>
  57. <script setup>
  58. import { onMounted } from 'vue';
  59. import { ElBreadcrumb, ElBreadcrumbItem, ElPagination, ElMessage } from 'element-plus'
  60. import { ArrowRight } from '@element-plus/icons-vue'
  61. // const nuxtApp = useNuxtApp();
  62. // const axios = nuxtApp.$axios;
  63. //1.获得路由id start ---------------------------------------->
  64. const route = useRoute();
  65. let articleId = 0;//路由id
  66. let pageNum = ref(2);
  67. let total = ref(1);
  68. let pageSize = ref(20);
  69. //获得当前的完整路径
  70. const fullPath = route.path;
  71. //拆分,取出来中间这一段,然后提取数字部分
  72. const segments = fullPath.split('/');
  73. const targetSegment = segments[1];
  74. //const numberPart = targetSegment.match(/\d+$/)?.[0];
  75. //let routeId = 20 //排除路径错误可以打开这个
  76. //通过导航路径反向查询导航id
  77. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  78. method: 'GET',
  79. query: {
  80. 'pinyin': targetSegment,
  81. },
  82. });
  83. if (getRouteId.code == 200) {
  84. articleId = getRouteId.data.category_id
  85. } else {
  86. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  87. console.log("错误位置:通过url路径查询导航池id")
  88. console.log("后端错误反馈:", getRouteId.message)
  89. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  90. }
  91. //获得html前的数字
  92. // const pageUrl = segments[2];
  93. // const pageNumber = pageUrl.split('.')[0];
  94. // console.log("当前URL中的页码:")
  95. // console.log(pageNumber)//2
  96. // pageNum.value = parseInt(pageNumber);
  97. pageNum.value = parseInt(route.params.id);
  98. //1.获得路由id end ---------------------------------------->
  99. //2.页面数据 start ---------------------------------------->
  100. //2.2新闻列表
  101. const newsList = ref([]);
  102. let newslists = async () => {
  103. const listData = await requestDataPromise('/web/getWebsiteArticleList', {
  104. method: 'GET',
  105. query: {
  106. 'page': pageNum.value,
  107. 'pageSize': pageSize.value,
  108. 'catid': articleId
  109. },
  110. });
  111. if (listData.code == 200) {
  112. newsList.value = listData.data.rows;
  113. total.value = listData.data.count;
  114. console.log('news111111', newsList.value);
  115. } else {
  116. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  117. console.log("错误位置:获取新闻列表")
  118. console.log("后端错误反馈1111:", listData.message)
  119. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  120. }
  121. }
  122. //获得列表
  123. newslists();
  124. //分页事件
  125. let changePage = (value) => {
  126. console.log("当前页码", value);
  127. navigateTo(`/${targetSegment}/list-${value}.html`)
  128. }
  129. //2.3获得页面名称
  130. const name = ref('')
  131. let getPageName = async () => {
  132. const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
  133. method: 'GET',
  134. query: {
  135. 'catid': articleId
  136. },
  137. });
  138. if (pageName.code == 200) {
  139. name.value = pageName.data.alias
  140. } else {
  141. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  142. console.log("错误位置:设置页面标题")
  143. console.log("后端错误反馈:", pageName.message)
  144. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  145. }
  146. }
  147. //获得列表
  148. getPageName();
  149. //2.页面数据 end ---------------------------------------->
  150. //3.二级栏目 start ---------------------------------------->
  151. //3.1通过id获取父栏目
  152. const parent_name = ref([]);
  153. const parent_id = ref([]);
  154. const parent_pinyin = ref("");
  155. let getParentNav = async () => {
  156. const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
  157. method: 'GET',
  158. query: {
  159. 'catid': articleId
  160. },
  161. });
  162. if (listData.code == 200) {
  163. // console.log(111999)
  164. // console.log(listData.data);
  165. parent_name.value = listData.data.parent_name;
  166. parent_id.value = listData.data.parent_id;
  167. parent_pinyin.value = listData.data.parent_pinyin;
  168. } else {
  169. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  170. console.log("错误位置:获取新闻列表")
  171. console.log("后端错误反馈:", listData.message)
  172. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  173. }
  174. getSecondNav();
  175. }
  176. //获得父级栏目详情
  177. getParentNav();
  178. // 3.2获取二级栏目
  179. const secondNav = ref([]);
  180. let getSecondNav = async () => {
  181. const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
  182. method: 'GET',
  183. query: {
  184. 'placeid': 1,
  185. 'pid': parent_id.value,
  186. 'num': 8,
  187. },
  188. });
  189. console.log('listData', listData);
  190. // secondNav.value = listData.data;
  191. if (listData.code == 200) {
  192. secondNav.value = listData.data;
  193. console.log('secondNav', secondNav.value);
  194. } else {
  195. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  196. console.log("错误位置:获取新闻列表")
  197. console.log("后端错误反馈:", listData.message)
  198. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  199. }
  200. }
  201. //3.二级栏目 end ---------------------------------------->
  202. //4.设置seo信息 start---------------------------------------->
  203. //4.1 设置seo信息
  204. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  205. method: 'GET',
  206. query: {
  207. 'catid': articleId
  208. },
  209. });
  210. if (setData.code == 200) {
  211. let seoTitle = setData.data.seo_title;
  212. let seoDescription = setData.data.seo_description;
  213. let seoKeywords = setData.data.seo_keywords;
  214. let seoSuffix = setData.data.suffix;
  215. let seoName = setData.data.website_name;
  216. useSeoMeta({
  217. title: seoTitle + "_" + seoName + "_" + seoSuffix,
  218. meta: [
  219. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  220. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  221. ]
  222. });
  223. } else {
  224. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  225. console.log("错误位置:设置列表页面SEO数据")
  226. console.log("后端错误反馈:", setData.message)
  227. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  228. }
  229. //4.设置seo信息 end---------------------------------------->
  230. //5.广告 start---------------------------------------->
  231. let adImg1 = ref({});
  232. let adImg2 = ref({});
  233. onMounted(async () => {
  234. //从客户端获取行政职能部门 加快打开速度
  235. const { $webUrl, $CwebUrl } = useNuxtApp();
  236. //广告1
  237. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_list_0001`
  238. const responseAd1 = await fetch(url, {
  239. headers: {
  240. 'Content-Type': 'application/json',
  241. 'Userurl': $CwebUrl,
  242. 'Origin': $CwebUrl
  243. }
  244. });
  245. const resultAd1 = await responseAd1.json();
  246. adImg1.value = resultAd1.data[0];
  247. console.log('adImg1', adImg1.value);
  248. //广告2
  249. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_list_0002`
  250. const responseAd2 = await fetch(url2, {
  251. headers: {
  252. 'Content-Type': 'application/json',
  253. 'Userurl': $CwebUrl,
  254. 'Origin': $CwebUrl
  255. }
  256. });
  257. const resultAd2 = await responseAd2.json();
  258. adImg2.value = resultAd2.data[0];
  259. })
  260. //5.广告 end---------------------------------------->
  261. // 6.跳转 start ---------------------------------------->
  262. const getLinkPathDetail = (item) => {
  263. if (item.islink == 1) {
  264. return `${item.linkurl}`;
  265. } else {
  266. return `/${item.pinyin}/${item.id}.html`;
  267. }
  268. }
  269. // 6.跳转 end ---------------------------------------->
  270. </script>
  271. <style lang="less" scoped>
  272. #newsList {
  273. width: 100%;
  274. overflow: hidden;
  275. }
  276. .nav2top {
  277. width: 1250px;
  278. height: 3px;
  279. margin: 0 auto;
  280. background-color: #a01c0e;
  281. }
  282. .nav2btm {
  283. width: 1200px;
  284. height: 3px;
  285. margin: 0 auto;
  286. background-color: #a01c0e;
  287. }
  288. .nav2 {
  289. width: 100%;
  290. height: 48px;
  291. background-color: #a01c0e;
  292. .inner {
  293. width: 1250px;
  294. height: 48px;
  295. line-height: 48px;
  296. padding: 0 45px;
  297. margin: 0 auto;
  298. box-sizing: border-box;
  299. display: flex;
  300. // justify-content: space-between;
  301. .titleList {
  302. font-family: Microsoft YaHei, Microsoft YaHei;
  303. font-weight: bold;
  304. font-size: 14px;
  305. color: #FFFFFF;
  306. .nav2_title {
  307. display: inline-block;
  308. font-family: Microsoft YaHei, Microsoft YaHei;
  309. font-weight: bold;
  310. font-size: 14px;
  311. color: #FFFFFF;
  312. }
  313. a {
  314. padding: 0 38px;
  315. color: #FFFFFF;
  316. border-left: 1px solid #7E1C11;
  317. }
  318. //鼠标点击后的样式
  319. .nav2_title_active {
  320. display: inline-block;
  321. font-family: Microsoft YaHei, Microsoft YaHei;
  322. font-weight: bold;
  323. font-size: 14px;
  324. color: #FFFFFF;
  325. border-bottom: 1px solid #FFFFFF;
  326. }
  327. }
  328. .titleList:hover {
  329. a {
  330. color: #a01c0e;
  331. .nav2_title {
  332. border-bottom: 1px solid #FFFFFF;
  333. }
  334. }
  335. }
  336. .home {
  337. width: 100px;
  338. font-family: Microsoft YaHei, Microsoft YaHei;
  339. font-weight: bold;
  340. font-size: 14px;
  341. color: #F8ECD2;
  342. a {
  343. color: #F8ECD2;
  344. margin-right: 39px;
  345. }
  346. }
  347. }
  348. }
  349. // 资讯列表
  350. .newsList {
  351. width: 100%;
  352. // height: 675px;
  353. overflow: hidden;
  354. margin-bottom: 70px;
  355. .inner {
  356. width: 1200px;
  357. .innerLeft,
  358. .innerRight {
  359. border-top: 1px solid #ccc;
  360. }
  361. .innerLeft {
  362. width: 820px;
  363. margin-right: 30px;
  364. .list {
  365. margin-bottom: 70px;
  366. li {
  367. width: 820px;
  368. padding: 15px 0;
  369. a {
  370. display: flex;
  371. justify-content: space-between;
  372. }
  373. .listTitle {
  374. // float: left;
  375. display: inline-block;
  376. width: 486px;
  377. white-space: nowrap;
  378. overflow: hidden;
  379. text-overflow: ellipsis;
  380. font-family: Microsoft YaHei, Microsoft YaHei;
  381. font-weight: 400;
  382. font-size: 20px;
  383. color: #333333;
  384. text-align: left;
  385. font-style: normal;
  386. text-transform: none;
  387. }
  388. .time {
  389. // float: right;
  390. font-family: Microsoft YaHei, Microsoft YaHei;
  391. font-weight: 400;
  392. font-size: 18px;
  393. color: #333333;
  394. }
  395. }
  396. >li:hover .listTitle {
  397. color: #a01c0e;
  398. }
  399. >li:nth-child(5n) {
  400. border-bottom: 1px solid #D9D9D9;
  401. padding-bottom: 30px;
  402. }
  403. >li:nth-child(5n+1) {
  404. span {
  405. font-weight: bold;
  406. }
  407. font-weight: bold;
  408. padding-top: 30px;
  409. }
  410. }
  411. >.pagination {
  412. width: 800px;
  413. height: 34px;
  414. margin-left: 141px;
  415. display: flex;
  416. justify-content: center;
  417. margin: 0;
  418. // 鼠标移入后字体颜色
  419. .el-pagination::v-deep :hover {
  420. color: #a01c0e;
  421. }
  422. .el-pagination.is-background::v-deep .btn-next,
  423. .el-pagination.is-background::v-deep .btn-prev {
  424. width: 70px;
  425. height: 34px;
  426. margin: 0px 10px;
  427. border-radius: 4px;
  428. }
  429. .el-pagination.is-background::v-deep .el-pager li {
  430. margin: 0px 10px;
  431. width: 38px;
  432. height: 34px;
  433. border-radius: 4px;
  434. }
  435. .el-pagination.is-background::v-deep .btn-next.is-active,
  436. .el-pagination.is-background::v-deep .btn-prev.is-active,
  437. .el-pagination.is-background::v-deep .el-pager li.is-active {
  438. background-color: #a01c0e;
  439. color: #fff;
  440. }
  441. }
  442. }
  443. .innerRight {
  444. width: 350px;
  445. height: 1242px;
  446. border-bottom: 1px solid #ccc;
  447. // height: 605px;
  448. }
  449. }
  450. }
  451. //资讯推荐
  452. .zixuntuijian {
  453. width: 100%;
  454. height: 290px;
  455. margin-bottom: 70px;
  456. .innerLeft {
  457. // 左侧
  458. .zixunLeft {
  459. margin-right: 30px;
  460. }
  461. .zixunRight,
  462. .zixunLeft {
  463. float: left;
  464. width: 380px;
  465. height: 290px;
  466. // 标题部分
  467. >.title {
  468. width: 380px;
  469. }
  470. >.title>h3 {
  471. height: 36px;
  472. font-family: Source Han Sans, Source Han Sans;
  473. font-weight: bold;
  474. font-size: 24px;
  475. color: #000000;
  476. line-height: 28px;
  477. text-align: left;
  478. font-style: normal;
  479. text-transform: none;
  480. border-bottom: 1px solid #a01c0e;
  481. }
  482. >.title>h3>span {
  483. float: right;
  484. width: 56px;
  485. height: 20px;
  486. line-height: 24px;
  487. font-weight: 400;
  488. font-size: 14px;
  489. color: #999999;
  490. font-style: normal;
  491. text-transform: none;
  492. }
  493. .photo_text {
  494. >li:first-child {
  495. width: 380px;
  496. height: 120px;
  497. margin-top: 20px;
  498. margin-bottom: 15px;
  499. position: relative;
  500. >img {
  501. float: left;
  502. width: 160px;
  503. height: 120px;
  504. }
  505. >div {
  506. float: left;
  507. width: 220px;
  508. height: 120px;
  509. padding-left: 15px;
  510. padding-top: 6px;
  511. box-sizing: border-box;
  512. background-color: #f6f6f6;
  513. >h5 {
  514. width: 200px;
  515. height: 54px;
  516. display: -webkit-box;
  517. -webkit-box-orient: vertical;
  518. -webkit-line-clamp: 2;
  519. overflow: hidden;
  520. text-overflow: ellipsis;
  521. word-break: break-all;
  522. font-family: Source Han Sans, Source Han Sans;
  523. font-weight: 500;
  524. font-size: 18px;
  525. color: #333333;
  526. line-height: 26px;
  527. text-align: left;
  528. font-style: normal;
  529. text-transform: none;
  530. }
  531. >p {
  532. width: 200px;
  533. height: 22px;
  534. line-height: 20px;
  535. position: absolute;
  536. bottom: 5px;
  537. right: 0;
  538. >span {
  539. display: inline-block;
  540. // width: 100px;
  541. height: 18px;
  542. font-family: Source Han Sans, Source Han Sans;
  543. font-weight: 400;
  544. font-size: 12px;
  545. color: #999999;
  546. text-align: left;
  547. line-height: 14px;
  548. font-style: normal;
  549. text-transform: none;
  550. }
  551. >span:last-child {
  552. // width: 90px;
  553. text-align: right;
  554. margin-left: 20px;
  555. }
  556. }
  557. }
  558. }
  559. >li {
  560. width: 380px;
  561. height: 25px;
  562. white-space: nowrap;
  563. overflow: hidden;
  564. text-overflow: ellipsis;
  565. font-family: PingFang SC, PingFang SC;
  566. font-weight: 500;
  567. font-size: 18px;
  568. color: #333333;
  569. line-height: 21px;
  570. text-align: left;
  571. font-style: normal;
  572. text-transform: none;
  573. margin-bottom: 10px;
  574. em {
  575. display: inline-block;
  576. width: 8px;
  577. height: 8px;
  578. border-radius: 8px;
  579. margin-right: 10px;
  580. background-color: #d9d9d9;
  581. }
  582. }
  583. >li:hover {
  584. color: #a01c0e;
  585. }
  586. >li:hover em {
  587. background-color: #a01c0e;
  588. }
  589. }
  590. }
  591. }
  592. .innerRight {
  593. width: 381px;
  594. height: 290px;
  595. background-color: #fbfbfb;
  596. >.title {
  597. width: 380px;
  598. height: 40px;
  599. line-height: 40px;
  600. border-top: 1px solid #a01c0e;
  601. border-bottom: 1px solid #e7e7e7;
  602. >h4 {
  603. font-family: Microsoft YaHei, Microsoft YaHei;
  604. font-weight: 400;
  605. margin-left: 20px;
  606. font-size: 20px;
  607. color: #000000;
  608. text-align: left;
  609. font-style: normal;
  610. text-transform: none;
  611. >span {
  612. float: right;
  613. font-family: Microsoft YaHei, Microsoft YaHei;
  614. font-weight: 400;
  615. font-size: 14px;
  616. margin-right: 10px;
  617. color: #999999;
  618. text-align: left;
  619. font-style: normal;
  620. text-transform: none;
  621. }
  622. }
  623. }
  624. .rightList {
  625. height: 540px;
  626. margin-top: 20px;
  627. >li {
  628. height: 100px;
  629. margin-bottom: 10px;
  630. >img {
  631. width: 150px;
  632. height: 100px;
  633. }
  634. >p {
  635. width: 219px;
  636. height: 100px;
  637. padding-left: 12px;
  638. font-family: PingFang SC, PingFang SC;
  639. font-weight: 400;
  640. font-size: 16px;
  641. color: #333333;
  642. line-height: 22px;
  643. text-align: left;
  644. font-style: normal;
  645. text-transform: none;
  646. }
  647. >p:hover {
  648. box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
  649. }
  650. }
  651. }
  652. }
  653. }
  654. </style>